<template>
  <div id="qianqichjgcsDetail" class="app-container">
    <div class="tupianShenCha" v-if="activeName=='1'">
      <div class="mapBox">
        <div class="mapBox_left" style="width:600px;height:600px;border: 1px solid #e9e9e9;border-right: none;">
          <span v-show="loadIfram==1" class="iframeLoad">加载中<div class="el-icon-loading"></div></span>
          <iframe v-show="loadIfram==2" id="wode" :src="$httpsCad + '/?url='+$https+filePath" frameborder="0" style="width:100%;height:100%;"></iframe>
          <!-- <iframe v-show="loadIfram==2" id="wode" src="http://49.4.89.238:7852/?url=http://49.4.89.238:30000/mdrawins/browse/图件/现状图/莲花村片区片块7-1.dwg" frameborder="0" style="width:100%;height:100%;"></iframe> -->
        </div>
       <tdMap style="height: 600px" :isShowControls="false" class="mapBox_right" ref="tdMap" :pkList="list" />
      </div>
      <div class="shenchaBox">
        <div class="shenchaBox_mainBox">
          <div class="shenchaBox_item">
            <p>问题类型：</p>
            <div class="shenchaBox_item_input">
              <el-select  class="shenchaBox_item_input" v-model="yijianValue" @change="changeOpionionType" placeholder="--请选择--">
                <el-option
                  v-for="item in cuowuList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="shenchaBox_item" v-if="isOpinionValueShow">
            <p>问题内容：</p>
            <div class="shenchaBox_item_input">
              <el-input
                class="shenchaBox_item_input"
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="yijianContent">
              </el-input>
            </div>
          </div>
          <div class="shenchaBox_item shenchaBox_item_button">
            <el-button v-if="!isLook" type="primary" v-loading.fullscreen.lock="fullscreenLoading"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)" @click="wentijilu" style="margin-right:10px;">提交</el-button>
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLandStatusMapAuditInfo,auditLandStatusMapInfo } from "@/api/siteSurveyEarlyStage";
import { auditLandEngineeringMap,getOpinionType,auditLandPlanningMap,onePlanningMap,queryLandEngineeringMap,queryLandPlanningMap } from "@/api/ghsjAndssfaPingShen";
import tdMap from "@/components/tdMap";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  components: {
    tdMap
  },
  data() {
    return {
      filePath:'',
      fullscreenLoading:false,
      yijianValue:'', //意见值
      yijianContent:'', //意见内容
      cuowuList:[], //错误类型数组
      loadIfram:1,
      data: [{
        id: 1,
        label: '土地利用规划',
        children: [{
          id: 8,
          label: '总体规划',
        },{
          id: 9,
          label: '管理区规划',
        },{
          id: 10,
          label: '土地整治规划',
        }]
      }, {
        id: 2,
        label: '土地利用现状',
        children: [{
          id: 5,
          label: '2018年'
        }, {
          id: 6,
          label: '2017年'
        }]
      }],
      activeName: '1',
      list: [],
      listLoading: true,
      listQuery: {
        page: 1,
        size: 10,
        projectId:40,
      },
      total:0, //总数
      defaultProps: {
          children: 'children',
          label: 'label'
        },
        landId:'',
      mainData:'',
      nowType:1, //当前查看状态1为工程布局图，2为规划图，3为单体图
      isOpinionValueShow:true,
      mapConfig: {
        map: null,
        lng: 106.55,
        lat: 29.57,
        zoom: 10,
        lay: null
      },
      T: null,
      isLook:''
    };
  },
  created() {
    this.$store.dispatch('app/toggleSideBarByWx',false)

    this.landId=this.$route.query.id
    this.nowType=this.$route.query.type
    
    this.isLook=this.$route.query.isLook
    this.getData()
    this.getOpinionType()
  },
  destroyed(){
    this.$store.dispatch('app/toggleSideBarByWx',true)
  },
  methods: {
    changeOpionionType(val){
      console.log(val)
      if(this.yijianValue=='NO_PROBLEM'){
        this.isOpinionValueShow=false
      }else{
        this.isOpinionValueShow=true
      }
    },
    //返回
    back(){
      this.$router.back(-1)
    },
    //问题记录
    wentijilu(){
      this.fullscreenLoading=true
      var that=this
      var data={
        "landId": this.landId,
        "opinionType": this.yijianValue,
        "opinion": this.yijianContent
      }
      if(this.nowType==1){
        auditLandEngineeringMap(data).then(res=>{
          this.fullscreenLoading=false
          console.log(res)
          if(res.code==1000){
            this.$message({
              message: '提交成功',
              type: 'success'
            });

            setTimeout(function(){
              that.$router.back(-1)
            },1200)
          }
        })
      }else if(this.nowType==2){
        auditLandPlanningMap(data).then(res=>{
          this.fullscreenLoading=false
          console.log(res)
          if(res.code==1000){
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            setTimeout(function(){
              that.$router.back(-1)
            },1200)
          }
        })
      }else if(this.nowType==3){
        onePlanningMap(data).then(res=>{
          this.fullscreenLoading=false
          console.log(res)
          if(res.code==1000){
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            setTimeout(function(){
              that.$router.back(-1)
            },1200)
          }
        })
      }
    },
    //获取意见类型
    getOpinionType(){
      getOpinionType().then(res=>{
        console.log(res)
        this.cuowuList=res.data
      })
    },
    getData(){//列表数据
      var that=this
        this.yijianContent=''
       this.yijianValue=''
       this.filePath=''
      this.listLoading=true
      var data={
        landId:this.landId
      }
      if(this.nowType==1){
        queryLandEngineeringMap(data).then(res=>{
          if(res.data!=null){
            this.yijianContent=res.data.opinion
            this.yijianValue=res.data.opinionType
            this.filePath=res.data.filePath
            if(this.yijianValue=='NO_PROBLEM'){
              this.isOpinionValueShow=false
            }else{
              this.isOpinionValueShow=true
            }
          }
        })
      }else if(this.nowType==2){
        queryLandPlanningMap(data).then(res=>{
          console.log(res,'123')
          if(res.data!=null){
            this.yijianContent=res.data.opinion
            this.yijianValue=res.data.opinionType
            this.filePath=res.data.filePath
            if(this.yijianValue=='NO_PROBLEM'){
              this.isOpinionValueShow=false
            }else{
              this.isOpinionValueShow=true
            }
          }
        })
      }
      
      getLandStatusMapAuditInfo(data).then(res=>{
        this.mainData=res.data
        //this.filePath=res.data.statusMap.filePath
        this.list.push(res.data)
        console.log(this.mainData.statusMap.filePath)
        console.log(this.$https+this.mainData.statusMap.filePath)
        var iframe = document.getElementById("wode"); 
        iframe.onload = function(){ 
           console.log("加载完成")
           that.loadIfram=2
           console.log(that)
        }; 
      })
    },
    //改变每页显示条数
    handleSizeChange(e){
      console.log(e)
    },
    //改变页码
    handleCurrentChange(num){
      console.log(num)
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style lang="scss" scoped>
#qianqichjgcsDetail /deep/ .el-tabs__nav-wrap::after{
  height: 1px;
}
#qianqichjgcsDetail .mapBox{
  display: flex;
  margin-top: 30px;
  justify-content: center;
}
#qianqichjgcsDetail .mapBox_left{
  width: 10%;
  border: 1px solid #e9e9e9;
  border-right: none;
}
#qianqichjgcsDetail .mapBox_right{
  width: 800px;
}

#qianqichjgcsDetail .ditudanghang{
  background: #f2f2f2;
  height: 40px;
  border-bottom: 1px solid #e9e9e9;
  overflow: hidden;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #4d4d4d;
  line-height: 40px;
}
#qianqichjgcsDetail .fujianList{
  margin-top: 30px;
}
#qianqichjgcsDetail .fujianList_item{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-left: 30px;
}
#qianqichjgcsDetail .fujianList_item p{
  font-size: 14px;
  font-weight: bold;
  margin-right: 150px;
}
#qianqichjgcsDetail .dachuShenChaBox{
  position: relative;
}
#qianqichjgcsDetail .dachuShenCha{
  position: absolute;
  right: 0;
  top:-10px;
}
#qianqichjgcsDetail .iframeLoad{
  display: flex;
  font-size: 35px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
#qianqichjgcsDetail .shenchaBox{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
#qianqichjgcsDetail .shenchaBox_item_input{
  width: 300px;
}
#qianqichjgcsDetail .shenchaBox_item_button{
  width: 300px;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 50px;
}
</style>
